<template>
	<div align="center">
		<div style="align-content: center; font-size: larger;">XXXX缺陷管理后台登录系统</div>
		<!--  <el-row>
           <el-col :span="8" :offset="8">
             <el-form :model="loginUser"  label-width="80px">
     <el-form-item label="用户名">
        <el-input v-model="loginUser.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
         <el-input v-model="loginUser.password" type="password"></el-input>
       </el-form-item>

         <el-form-item>
           <el-button type="primary" @click="login()">立即登录</el-button>

         </el-form-item>
         </el-form></el-col>
           </el-row> -->
		<div><img src="../assets/u78.png"><br>
			<img src="../assets/u80.png" style="position: relative;left: 118px;">

			<el-input type="text" placeholder="请输入账号" class="username" circle v-model="loginUser.username"></el-input>
			<br>
			<el-input type="password" class="password" placeholder="请输入密码" v-model="loginUser.password"></el-input>
			<el-button class="loginbutton" @click="login()">立即登录</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "login",
		data() {
			return {
				loginUser: {
					username: "",
					password: ""
				}
			}
		},
		methods: {
			login() {
				let params = new URLSearchParams();
				params.append("username", this.loginUser.username);
				params.append("password", this.loginUser.password);
				this.$http.post("/login", params).then(resp => {


					if (resp.data.code == 200) {
						localStorage.setItem("loginUser", JSON.stringify(resp.data.data))

						this.$router.push("/mainpage")
						this.$message({
							message: resp.data.message,
							type: 'success',
							duration: 1000
						})

					} else {
						this.loginUser.name = this.loginUser.password = ""
					}
				})
			}
		}
	}
</script>

<style>
	img {
		float: inherit;
	}

	/* input{
    position: relative;
    bottom: 300px;
    width: 180px;
    height: 30px;
  } */
	.username {
		position: relative;
		bottom: 280px;
		width: 230px;
		height: 30px;
		right: 285px;

	}

	.password {
		position: relative;
		bottom: 240px;
		width: 230px;
		height: 30px;
		right: -22px;
	}

	.loginbutton {
		position: relative;
		bottom: 180px;
	}
</style>
